<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
   
    <div id="root">
        <school></school>
    </div>

    <script>
        Vue.config.productionTip = false
        //vm和vc的区别
        /*
            vm和vc用法几乎一样，但是并不是同一个东西，区别：
            1.vm和vc创建时构造函数不同，Vue和VueComponent
            2.vm可以用el属性指定接管的容器，vc不可以
            3.vm的data可以写成对象或函数形式，vc只能写成函数形式
        */
               
       //原型与原型链基础

       //定义一个构造函数
       function Demo() {
            this.a = 1
            this.b = 2
       }
       //创建一个Demo的实例对象
       let d = new Demo()

       //原型对象
       console.log(Demo.prototype) //构造函数的prototype指向原型对象，prototype被称为显式原型属性
       console.log(d.__proto__) //实例对象的__proto__也指向原型对象，__proto__被称为隐式原型属性
       console.log(d.__proto__ === Demo.prototype) //true

       //往原型对象加一个属性x
       Demo.prototype.x = 99

       console.log(d.__proto__.x) //实例对象可以通过原型对象拿到x
       //当实例对象没有x属性时，会自动通过隐式原型链找x属性，即d.x === d.__proto__.x
       console.log(d.x) //99

       /*
        一个重要的内置关系：
        1. VueComponent.prototype.__proto__ === Vue.prototype
        2. 为什么要有这个内置关系？因为这样可以让VueComponent实例对象访问到Vue原型上的属性和方法
       */
        //school组件
        let sch = Vue.extend({ 
            name: 'school',
            template: `
                <div>
                    <h2>学校名称：{{name}}</h2>
                    <h2>学校地址：{{address}}</h2>
                    <button @click="showY">点我展示y</button>
                </div>
            `,
            data() {
              return {
                name: 'shanggg',
                address: 'bj',
              }
            },
            methods:{
                showY() {
                    console.log("vc.y=" + this.y);
                }
            }
        })

        let vm = new Vue({
            el: "#root",
            data: {
                msg: 'hello'
            },
            components: {
                school: sch,
            }
        })

        //验证内置关系
        //console.log(VueComponent.prototype.__proto__ === Vue.prototype) //这么写报错，Vue没有对外提供VueComponent构造函数
        console.log(sch.prototype.__proto__ === Vue.prototype) //true

        /*
            Vue相关原型链
            vm.__proto__ ==> Vue.prototype
            Vue.prototype.__proto__ ==> Object.prototype
            Object.prototype__proto__ ==> null

            VueComponent相关原型链
            vc.__proto__ ==> VueComponent.prototype
            VueComponent.prototype__proto__ ==> Object.prototype （Vue做了断开）
            Object.prototype__proto__ ==> null

            VueComponent.prototype__proto__ ==> Vue.prototype （Vue做了重新指向）
        */
       //验证，往Vue原型上加个y，
       Vue.prototype.y = 88
       //vm.y vc.y通过按钮打印
       console.log("vm.y=" + vm.y);
    </script>
</body>
</html>